<template>
  <div style="width: 256px">
    <a-menu
      :selectedKeys="selectedKeys"
      :openKeys.sync="openKeys"
      mode="inline"
      :theme="theme"
    >
      <template v-for="item in menuData">
        <a-menu-item v-if="!item.children" :key="item.path" @click="()=>$router.push({path:item.path, query: $route.query})">
          <a-icon v-if="item.meta.icon" :type="item.meta.icon" />
          <span>{{ item.meta.title }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.path" :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>

<script>
// recommend use functional component
import SubMenu from './SubMenu'
import{ check} from '../utils/auth'
export default {
  components: {
    "sub-menu" : SubMenu
  },
  props:{
    theme:{
      type: String,
      default: 'dark'
    }
  },
  watch:{
    '$route.path': function(val){
      this.selectedKeys = this.selectedKeysMap[val];
      this.openKeys = this.collapsed ? [] : this.openKeysMap[val]
    }
  },
  data() {
    this.selectedKeysMap = {}
    this.openKeysMap = {}
    // 从路由文件中获取配置
    const menuData = this.getMenuData(this.$router.options.routes);
    return {
      collapsed: false,
      list: [],
      menuData,
      openKeys: this.collapsed ? [] : this.openKeysMap[this.$route.path],
      selectedKeys: this.selectedKeysMap[this.$route.path]
    };
  },
  created(){
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    // 处理路由配置文件
    getMenuData(routes = [], parentKeys = [], selectedKey) {
      const menuData = []
      for(let item of routes) {
        // 检查当前用户是否有权限 渲染该导航选项
        if(item.meta && item.meta.authority && !check(item.meta.authority)) {
          break;
        }
        if(item.name && !item.hideInMenu){
          this.openKeysMap[item.path] = parentKeys;
          this.selectedKeysMap[item.path] = [selectedKey || item.path  ]
          const newItem = {...item}
          delete newItem.children
          if(item.children && !item.hideChildrenInMenu) {
            newItem.children = this.getMenuData(item.children,[...parentKeys, item.path])
          } else{
            this.getMenuData(item.children, selectedKey ? parentKeys : [...parentKeys, item.path], selectedKey || item.path)
          }
          menuData.push(newItem)
        }
        else if(!item.hideInMenu && !item.hideChildrenInMenu && item.children) {
          menuData.push(...this.getMenuData(item.children, [...parentKeys, item.path]))
        }

      }
      
      return menuData
    }
  },
};
</script>
